<style lang="scss" scoped>
    .settement{
        width: 90%;
        padding: 0 5%;
        .setName{
            font-size: 20px;
            span{
                font-size: 16px;
                color: #333;
            }
        }
        .box{
            width: 100%;
            display: flex;
            flex-wrap: wrap
            // justify-content: space-between;
        }
        .query{
            height: 70px;
            width: 100%;
            padding:20px;
            padding-top: 40px;
            margin: 20px 0;
            box-sizing: border-box;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            display: flex;
            justify-items: center;
            align-items: center;
        }
        .merchant{
            width: 31%;
            // flex: 1;
            height: 260px;
            margin:0 14px 50px 14px;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            .mername{
                width: 100%;
                height: 200px;
                display: flex;
                padding: 20px;
                border-bottom: 1px dashed #333;
                box-sizing: border-box;
                .image{
                    width: 190px;
                    height: 150px;
                    margin-right: 20px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .name{
                    font-size: 18px;
                    font-weight: 600;
                    padding-bottom: 6px;
                }
                .balance,
                .settlable,
                .account,
                .date{
                    font-size: 12px;
                    color: #333;
                    padding-top: 15px;
                }
            }
            .but{
                height: 60px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .el-button:nth-of-type(1){
                    color: #fff;
                    background-color: rgb(254,218,120);
                }
                .el-button:nth-of-type(2){
                    color: #fff;
                    background-color: rgb(131,221,221);
                }
            }
        }
        .boby{
            // padding: 15px;
            border: 1px solid #000;
            .title{
                display: flex;
                
                div{
                    flex: 1;
                    text-align: center;
                    font-size: 16px;
                    height: 30px;
                    line-height: 30px;
                    font-weight: 600;
                    background-color: #ccc;
                }
            }
            .content{
                display: flex;
                div{
                    flex: 1;
                    text-align: center;
                    font-size: 15px;
                    height: 30px;
                    line-height: 30px;
                    // font-weight: 600;
                    background-color: #fff;
                    .el-button {
                        height: 20px;
                        background-color: rgb(33, 216, 222);
                    }
                
                }
            }
        }
        .detail{
            .day,
            .cycle,
            .price,
            .red_envelope
            {
                padding-bottom: 10px;
            }
        }
    }
</style>
<template>
    <div class="settement">
        <div class="setName">
            平台管理/<span>商户结算</span>
        </div>
        <div class="query">
            <el-form-item label="商户名" prop="id">
                <el-input   placeholder="请输入查询的商户名"/>
            </el-form-item>
        </div>
        <div class="box">
            <div class="merchant">
                <div class="mername">
                    <div class="image">
                        <img src="../../../assets/ST.webp" alt="">
                    </div>
                    <div class="detail">
                        <div class="name">
                            上海体育学院
                        </div>
                        <div class="balance">
                            余额：6000.00元
                        </div>
                        <div class="settlable">
                            可结算：5000.00元
                        </div>
                        <div class="account">
                            账户：6228041956567412
                        </div>
                        <div class="date">
                            上次结算：2016-05-12
                        </div>
                    </div>
                </div>
                <div class="but">
                        <el-button plain @click="showAdd=true">历史结算记录</el-button>
                        <el-button plain >发起本次结算</el-button>
                </div>
            </div>

            <div class="merchant">
                <div class="mername">
                    <div class="image">
                        <img src="../../../assets/ST.webp" alt="">
                    </div>
                    <div class="detail">
                        <div class="name">
                            上海体育学院
                        </div>
                        <div class="balance">
                            余额：6000.00元
                        </div>
                        <div class="settlable">
                            可结算：5000.00元
                        </div>
                        <div class="account">
                            账户：6228041956567412
                        </div>
                        <div class="date">
                            上次结算：2016-05-12
                        </div>
                    </div>
                </div>
                <div class="but">
                        <el-button plain @click="showAdd=true">历史结算记录</el-button>
                        <el-button plain >发起本次结算</el-button>
                </div>
            </div>
            
            <div class="merchant">
                <div class="mername">
                    <div class="image">
                        <img src="../../../assets/ST.webp" alt="">
                    </div>
                    <div class="detail">
                        <div class="name">
                            上海体育学院
                        </div>
                        <div class="balance">
                            余额：6000.00元
                        </div>
                        <div class="settlable">
                            可结算：5000.00元
                        </div>
                        <div class="account">
                            账户：6228041956567412
                        </div>
                        <div class="date">
                            上次结算：2016-05-12
                        </div>
                    </div>
                </div>
                <div class="but">
                        <el-button plain @click="showAdd=true">历史结算记录</el-button>
                        <el-button plain >发起本次结算</el-button>
                </div>
            </div>

            <div class="merchant">
                <div class="mername">
                    <div class="image">
                        <img src="../../../assets/ST.webp" alt="">
                    </div>
                    <div class="detail">
                        <div class="name">
                            上海体育学院
                        </div>
                        <div class="balance">
                            余额：6000.00元
                        </div>
                        <div class="settlable">
                            可结算：5000.00元
                        </div>
                        <div class="account">
                            账户：6228041956567412
                        </div>
                        <div class="date">
                            上次结算：2016-05-12
                        </div>
                    </div>
                </div>
                <div class="but">
                        <el-button plain @click="showAdd=true">历史结算记录</el-button>
                        <el-button plain >发起本次结算</el-button>
                </div>
            </div>

            <div class="merchant">
                <div class="mername">
                    <div class="image">
                        <img src="../../../assets/ST.webp" alt="">
                    </div>
                    <div class="detail">
                        <div class="name">
                            上海体育学院
                        </div>
                        <div class="balance">
                            余额：6000.00元
                        </div>
                        <div class="settlable">
                            可结算：5000.00元
                        </div>
                        <div class="account">
                            账户：6228041956567412
                        </div>
                        <div class="date">
                            上次结算：2016-05-12
                        </div>
                    </div>
                </div>
                <div class="but">
                        <el-button plain @click="showAdd=true">历史结算记录</el-button>
                        <el-button plain >发起本次结算</el-button>
                </div>
            </div>
        </div>
        <!-- 历史结算记录 -->
        <el-dialog  title="历史结算记录" width="50%" v-model="showAdd">
            <div class="boby">
                <div class="title">
                    <div>结算日期</div>
                    <div>结算周期</div>
                    <div>操作</div>
                </div>
                <div class="content">
                    <div>
                        2016-06-18
                    </div>
                    <div>
                        2016-05-18 —— 2016-06-18
                    </div>
                    <div>
                        <el-button plain @click="showdetail=true">明细</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 历史结算记录ed -->
        <!-- 明细 -->
        <el-dialog  title="历史结算记录明细" width="60%" v-model="showdetail">
            <div class="detail">
                <div class="day">
                    结算日期
                    &emsp; 
                    <span>
                        2016-06-18
                    </span>
                </div>
                <div class="cycle">
                    结算周期
                    &emsp; 
                    <span>
                        2016-05-18 —— 2016-06-18
                    </span>
                </div>
                <div>操作</div>
                <div class="price">
                    总金额: 
                    <span>
                        20000
                    </span>
                </div>
                <div class="red_envelope">
                    红包金额: 
                    <span>
                        20000
                    </span>
                </div>
                
                <div class="boby">
                    <div class="title">
                        <div>订单号</div>
                        <div>订单类型</div>
                        <div>支付平台</div>
                        <div>支付平台交易号</div>
                        <div>订单日期</div>
                        <div>订单金额(元)</div>
                        <div>红包金额(元)</div>
                    </div>
                    <div class="content">
                        <div>
                            123456
                        </div>
                        <div>
                            订场订单
                        </div>
                        <div>
                            支付宝
                        </div>
                        <div>
                            789456
                        </div>
                        <div>
                            2016-06-18
                        </div>
                        <div>
                            100
                        </div>
                        <div>
                            5
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 明细ed -->
    </div>
</template>

<script lang="ts" setup>
import{ref} from 'vue'
// 定义弹框的是否显示
const showAdd = ref(false);
// 明细弹框
const showdetail = ref(false);
</script>